<template>
  <div class="goodsmanage">
    <a-card v-if="$route.path=='/firstgifts/goodsManage'" :bordered="false" style="border-radius:8px;margin-top:10px;">
      <div class="card_title">
        商品管理
      </div>
      <div class="groupbox flex row_bet flex_wrap">
        <div class="btns" style="margin-bottom: 5px;">
          <a-radio-group class="br4" :value="type" @change="dobtns">
            <a-radio-button value="a">
              所有商品
            </a-radio-button>
            <a-radio-button :value="1">
              未提交
            </a-radio-button>
            <a-radio-button :value="2">
              活动中
            </a-radio-button>
            <a-radio-button :value="3">
              已拒绝
            </a-radio-button>
            <a-radio-button :value="4">
              已下架
            </a-radio-button>
          </a-radio-group>
        </div>
        <div class="flex col_center flex_wrap">
          <span>排期：</span>
          <a-range-picker
            :ranges="{
              本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
              上周: [
                moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                moment().subtract(parseInt(moment().format('d')), 'days')
              ],
              本月: [
                moment()
                  .month(moment().month())
                  .startOf('month'),
                moment()
                  .month(moment().month())
                  .endOf('month')
              ],
              上月: [
                moment(
                  moment()
                    .subtract(1, 'month')
                    .format('YYYY-MM') + '-01'
                ),
                moment(
                  moment()
                    .subtract(1, 'month')
                    .format('YYYY-MM') + '-01'
                )
                  .subtract(-1, 'month')
                  .add(-1, 'days')
              ],
              半年: [
                moment()
                  .startOf('day')
                  .subtract(6, 'month'),
                moment()
              ]
            }"
            format="YYYY-MM-DD"
            @change="passChange"
            style="width:230px;margin-bottom:5px;margin-right:5px;"
          >
            <div
              class="flex row_around col_center"
              style="height:30px;border: 1px solid rgb(232, 233, 234);border-radius: 4px;">
              <span class="m_l_10">{{ pass }}</span>
              <a-icon type="calendar" style="float: right;margin-left: auto;margin-right: 10px;"/>
            </div>
          </a-range-picker>
          <span>关键词：</span>
          <a-input
            v-model="search"
            class="br4"
            style="width:200px;margin-bottom:5px;margin-right:5px;"
            placeholder="标题/商品ID/店铺名"
            allowClear/>
          <a-button
            type="primary"
            :disabled="btnloading"
            class="br4"
            @click="dopasssearch"
            style="margin-bottom:5px;margin-right:5px;">
            <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
            {{ btnloading===true?'搜索中...':'搜索' }}
          </a-button>
          <a-button class="br4" @click="exportToExcel" style="margin-bottom:5px;margin-right:5px;">导出</a-button>
        </div>
      </div>
      <div class="activitytable">
        <a-table
          :columns="columns"
          :rowKey="activity => activity.id"
          :dataSource="activity"
          :loading="loading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="pro_img" slot-scope="text, row">
            <div class="goodsinfo">
              <img
                :src="row.pro_img"
                alt=""
                srcset=""
                style="width:80px;height:80px;margin-right:15px;border-radius: 4px;"
              />
              <div class="info-right">
                <div class="line-1">
                  <a
                    :href="'https://detail.tmall.com/item.htm?id='+row.pro_itemId"
                    target="_blank"
                    rel="noopener noreferrer"> {{ row.pro_title }}</a>
                </div>
                <div>商品ID：{{ row.pro_itemId }}</div>
                <div>销量：{{ row.pro_origSales }}</div>
                <div>店铺：{{ row.pro_shopName }}</div>
              </div>
            </div>
          </div>
          <div slot="pro_price" slot-scope="text, row">
            <span
              style="color: #2396F9;">{{ row.pro_price }} / {{ row.pro_couponPrice }} / {{ row.pro_discount }}</span>
          </div>
          <div slot="pro_couponSur" slot-scope="text, row">
            <a :href="row.pro_couponUrl" target="_blank"><span style="color: #2396F9;">{{ row.pro_couponSur }} / {{ row.pro_couponNum }}</span></a>
          </div>
          <div slot="pro_goodState" slot-scope="text, row">
            <div>
              <a-tag class="br4" v-if="row.pro_goodState === 1">未提交</a-tag>
              <a-tag class="br4" color="#f50" v-if="row.pro_goodState === 2">待审核</a-tag>
              <a-tag class="br4" color="#39C15B" v-if="row.pro_goodState === 3">活动中</a-tag>
              <a-tag class="br4" color="#FF0303" v-if="row.pro_goodState === 4">已拒绝</a-tag>
              <a-tag class="br4" color="#f36e2f" v-if="row.pro_goodState === 5">已暂停</a-tag>
              <a-tag class="br4" color="#BABDC1" v-if="row.pro_goodState === 6">已下架</a-tag>
            </div>
          </div>
          <div slot="pro_serviceRate" slot-scope="text, row">
            <div>佣金：{{ row.pro_commissionRate }}%</div>
            <div>服务：{{ row.pro_serviceRate }}%</div>
          </div>
          <div slot="active" slot-scope="text, row">
            <a-button v-if="row.pro_goodState!== 6" type="link" @click="doedit(row)">
              修改
            </a-button>
            <span v-if="row.pro_goodState === 6">无</span>
            <div>
              <a-button v-if="row.pro_goodState === 3" type="link" @click="dooff(row.id)">
                下架
              </a-button>
            </div>
          </div>

        </a-table>
      </div>
    </a-card>
    <router-view v-else></router-view>
  </div>
</template>

<script>
  import moment from 'moment'
  import { getgoldrushlist, dooffgoldgoods } from '@/api/firstgiftsApi'
  import { exportExcel } from '@/assets/js/Export2Excel'

  export default {
    name: 'Goodsmanage',
    data () {
      return {
        moment,
        btnloading: false,
        endVal: 0,
        type: 'a',
        search: '',
        columns: [
          {
            title: '商品信息',
            align: 'left',
            dataIndex: 'pro_img',
            scopedSlots: {
              customRender: 'pro_img'
            }
          },
          {
            title: '优惠券',
            align: 'center',
            dataIndex: 'pro_couponSur',
            scopedSlots: {
              customRender: 'pro_couponSur'
            }
          },
          {
            title: '原价/券后价/抵扣价',
            align: 'center',
            dataIndex: 'pro_price',
            scopedSlots: {
              customRender: 'pro_price'
            }
          },
          {
            title: '费率',
            align: 'left',
            dataIndex: 'pro_serviceRate',
            scopedSlots: {
              customRender: 'pro_serviceRate'
            }
          },
          {
            title: '实际服务费',
            align: 'center',
            dataIndex: 'pro_actservice',
            scopedSlots: {
              customRender: 'pro_actservice'
            }
          },
          {
            title: '活动结束时间',
            align: 'center',
            dataIndex: 'pro_actTime',
            scopedSlots: {
              customRender: 'pro_actTime'
            }
          },
          {
            title: '发布时间',
            align: 'center',
            dataIndex: 'pro_addTime',
            scopedSlots: {
              customRender: 'pro_addTime'
            }
          },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'pro_remarks',
            scopedSlots: {
              customRender: 'pro_remarks'
            }
          },
          {
            title: '商品状态',
            align: 'center',
            dataIndex: 'pro_goodState',
            scopedSlots: {
              customRender: 'pro_goodState'
            }
          },
          {
            title: '操作',
            align: 'center',
            dataIndex: 'active',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        activity: [
          // {
          //   id: 8075,
          //   pro_actTime: '2020-09-13',
          //   pro_actservice: '0.81',
          //   pro_addTime: '2020-11-24',
          //   pro_commissionRate: '20',
          //   pro_couponNum: 1000,
          //   pro_couponPrice: '18.00',
          //   pro_couponSur: 200,
          //   pro_discount: '2.00',
          //   pro_goodState: 1,
          //   pro_img: 'https://img.alicdn.com/bao/uploaded/i3/2981880851/O1CN017DYVsj1I9nflmOaFT_!!0-item_pic.jpg',
          //   pro_itemId: '591539820562',
          //   pro_origSales: 1,
          //   pro_price: '20.00',
          //   pro_remarks: null,
          //   pro_serviceRate: '10',
          //   pro_shopName: '寒米旗舰店',
          //   pro_title: '测试'
          // }
        ],
        loading: false,
        passstart: null,
        passend: null,
        pagination: {
          pageSize: 15,
          page: 1
        },
        pass: ''
      }
    },
    watch: {},
    computed: {},
    created () {
      this.getgoldrushlist(1, 15, 'a')
    },
    mounted () {
    },
    methods: {
      exportToExcel () {
        // excel表格数据导出
        require.ensure([], () => {
          const tHeader = ['商品ID', '标题', '店铺名称', '优惠券剩余', '优惠券总数', '原价', '券后价', '抵扣加',
            '服务费率', '佣金比例', '实际服务费', '活动结束时间', '发布时间', '备注']// Excel的表格第一行的标题
          const filterVal = ['pro_itemId', 'pro_title', 'pro_origSales', 'pro_shopName', 'pro_couponSur', 'pro_couponNum', 'pro_price', 'pro_couponPrice', 'pro_discount',
            'pro_serviceRate', 'pro_commissionRate', 'pro_actservice', 'pro_actTime', 'pro_addTime', 'pro_remarks'
          ]// 跟上面标题一一对应的字段
          const list = this.activity // 表格绑定的数组数据 即要导出的数据
          console.log(list)
          const excelName = '首单礼金商品数据'// 报表名称
          const data = this.formatJson(filterVal, list)
          exportExcel(tHeader, data, excelName)
        })
      },
      formatJson (filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      dooff (rid) {
        var that = this
        this.$confirm({
          title: '提示',
          content: '是否下架商品？',
          onOk () {
            dooffgoldgoods({
              id: rid
            }).then(res => {
              console.log(res)
              if (res.code === 200) {
                that.$message.success('下架成功!')
                that.getgoldrushlist(1, 15)
              }
            }).catch(err => {
              console.log(err)
            })
          },
          onCancel () {
          }
        })
      },
      doedit (row) {
        console.log(row)
        this.$store.dispatch('setFirstgname', row)
        this.$router.push({
          path: '/firstgifts/goodsManage/editGoods'
        })
      },
      dobtns (val) {
        console.log(val)
        this.type = val.target.value
        this.getgoldrushlist(1, 15, this.type, this.search)
      },
      dopasssearch () {
        this.btnloading = true
        //   console.log(this.search)
        this.getgoldrushlist(1, 15, this.type, this.search)
      },
      // 商品列表
      getgoldrushlist (page, pagesize, type, search) {
        this.loading = true
        getgoldrushlist({
          page: page,
          pagesize: pagesize,
          type: type, // 1未提交，2活动中，3已拒绝，4已下架（不传默认全部）
          search: search,
          start: this.passstart,
          end: this.passend
        })
          .then(res => {
            console.log(res)
            this.activity = res.data.data
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.btnloading = false
            this.loading = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.getgoldrushlist(params.page, 15, this.type, this.search)
      },
      passChange (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        this.passstart = moment(dateStrings[0]).format('YYYY-MM-DD')
        this.passend = moment(dateStrings[1]).format('YYYY-MM-DD')
        // console.log(this.passstart, this.passend)
        const str = moment(dateStrings[0]).format('YYYY-MM-DD') + ' 至 ' + moment(dateStrings[1]).format('YYYY-MM-DD')
        this.pass = str
        this.getgoldrushlist(1, 15, this.type, this.search)
      }
    }
  }
</script>

<style lang="less" scoped>
  .goodsmanage {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      margin-bottom: 22px;
      font-weight: 600;
    }

    .header_box {
      height: 101px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-info {
        .title {
          color: rgba(16, 16, 16, 0.7);
          font-size: 12px;
        }

        .datainfo {
          font-size: 28px;
          color: #101010;
          font-weight: 600;
        }
      }
    }

    .groupbox {
      margin-bottom: 16px;

      /deep/ .ant-radio-wrapper {
        color: #96989b;
        font-weight: 600;
      }

      /deep/ .ant-radio {
        display: none;
      }

      /deep/ .ant-radio-wrapper-checked {
        font-weight: 600;
        color: #101010;
      }

      /deep/ .ant-input {
        border-radius: 4px;
        height: 30px;
      }

      .btns {
        /deep/ .ant-btn {
          height: 30px;
        }
      }
    }

    .goodsinfo {
      display: flex;

      .info-right {
        width: 174px;
        text-align: left;
      }
    }

    .activitytable {
      /deep/ .ant-table-footer {
        padding-right: 0 !important;
      }
    }
  }
</style>
